<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>到站运单</span>
          </div>
          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="70px"
            size="small">
            <el-form-item label="运单号" prop="code">
              <el-input v-model="queryParams.code" clearable placeholder="请输入运单号" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="车牌号" prop="license">
              <el-input v-model="queryParams.license" clearable placeholder="请输入车牌号"
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
              </el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          <el-table v-loading="loading" :data="shipmentList" @selection-change="handleSelectionChange"
            @row-dblclick="getDzLedList">
            <el-table-column align="center" fixed type="selection" width="55" />
            <el-table-column align="left" label="运单" prop="dtMap.jcOrganizationIdDtLabel" width="160">
              <template #default="scope">
                <div>组织:{{ scope.row.dtMap.jcOrganizationIdDtLabel }}</div>
                <div>运单号:{{ scope.row.code }}</div>
                <div>
                  运单日期:{{ parseTime(scope.row.time, "{y}-{m}-{d}") }}
                </div>
                <div>
                  <span>运单状态:</span>
                  <dict-tag :options="dict.type.OrderStatus" :value="scope.row.status" style="display: inline-block" />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="车辆" prop="license" width="200">
              <template #default="scope">
                <div>车牌号:{{ scope.row.license }}</div>
                <div>
                  <span>承运商类型:</span>
                  <dict-tag :options="dict.type.Cytp" :value="scope.row.carrierType" style="display: inline-block" />
                </div>
                <div>
                  <span>承运商是否超期:</span>
                  <dict-tag :options="dict.type.CommIsNot" :value="scope.row.carriageIsExceed"
                    style="display: inline-block" />
                </div>
                <div>承运商：{{ scope.row.dtMap.jcCarrierIdDtLabel }}</div>
                <div>车辆：{{ scope.row.dtMap.jcVehicleIdDtLabel }}</div>
                <div>司机：{{ scope.row.dtMap.jcDriverIdDtLabel }}</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="站点" prop="dtMap.jcFromOrganizationIdDtLabel" width="200">
              <template #default="scope">
                <div>启运时间：{{ scope.row.planLeaveTime }}</div>
                <div>
                  启运站：{{ scope.row.dtMap.jcFromOrganizationIdDtLabel }}
                </div>
                <div>
                  当前站：{{ scope.row.dtMap.jcNowOrganizationIdDtLabel }}
                </div>
                <div>
                  下一站：{{ scope.row.dtMap.jcNextOrganizationIdDtLabel }}
                </div>
                <div>
                  目的站：{{ scope.row.dtMap.jcToOrganizationIdDtLabel }}
                </div>
                <div>途径站：{{ scope.row.orgnameList }}</div>
                <div>实际到达时间：{{ scope.row.factArriveTime }}</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="金额" prop="totalFee">
              <template #default="scope">
                <div>金额:{{ scope.row.totalFee }}</div>
                <div>数量:{{ scope.row.number }}</div>
                <div>货值:{{ scope.row.value }}</div>
                <div>体积:{{ scope.row.volume }}</div>
                <div>重量:{{ scope.row.weight }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
            :total="total" @pagination="getList" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>分段订单</span>
          </div>
          <el-table v-if="ledList" v-loading="loading" :data="ledList">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" fixed label="编号" prop="code" width="150" />
            <el-table-column align="center" label="出发机构" prop="fromOrganizationName" width="100" />
            <el-table-column align="center" label="目的机构" prop="toOrganizationName" width="100" />
            <el-table-column align="center" label="订单日期" prop="time" width="100">
              <template #default="scope">
                <span>{{ parseTime(scope.row.time, "{y}-{m}-{d}") }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发货单号" prop="relateBill1" width="140" />
            <el-table-column align="center" label="客户单号" prop="relateBill2" width="140" />
            <el-table-column align="center" label="订单状态" prop="status">
              <template #default="scope">
                <dict-tag :options="dict.type.OrderStatus" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="客户名称" prop="customerName" width="180" />
            <el-table-column align="center" label="合同是否超期" prop="customerIsExceed" width="100">
              <template #default="scope">
                <dict-tag :options="dict.type.CommIsNot" :value="scope.row.customerIsExceed" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="实际到达时间" prop="factArriveTime" width="180" />
            <el-table-column align="center" label="实际发运时间" prop="factLeaveTime" width="180" />
            <el-table-column align="center" label="交付方式" prop="handoverType" width="120">
              <template #default="scope">
                <dict-tag :options="dict.type.HandoverType" :value="scope.row.handoverType" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否回单" prop="isBack" width="120">
              <template #default="scope">
                <dict-tag :options="dict.type.CommIsNot" :value="scope.row.isBack" />
                <div v-if="scope.row.isBack === 1">
                  回单份数: {{ scope.row.backNumber }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="在途跟踪" prop="createName" width="140">
              <template #default="scope">
                <el-button size="mini" type="primary" @click="openTrack(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="要求到达时间" prop="planArriveTime" width="180" />
            <el-table-column align="center" label="要求发运时间" prop="planLeaveTime" width="180" />
            <el-table-column align="center" label="运输性质" prop="transportPro" width="120">
              <template #default="scope">
                <dict-tag :options="dict.type.TransportPro" :value="scope.row.transportPro" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="件数(件)" prop="number" width="80" />
            <el-table-column align="center" label="体积(平方)" prop="volume" width="100" />
            <el-table-column align="center" label="重量(kg)" prop="weight" width="80" />
            <el-table-column align="center" label="创建时间" prop="createTime" width="180" />
            <el-table-column align="center" label="创建人" prop="createName" />
            <el-table-column align="center" fixed="right" label="签收时间" prop="qsTime" width="100" />
            <el-table-column align="center" fixed="right" label="签收人" prop="qsPerson" width="120" />
            <el-table-column align="center" fixed="right" label="签收单图片" prop="qsImgs" width="120">
              <template #default="scope">
                <el-button v-if="scope.row.qsImgs" size="mini" type="primary" @click="openPic(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDZShipmentList } from "@/api/shipment/shipment";
import { getDZLedList } from "@/api/order/led";

export default {
  name: "GoodsArrive",
  dicts: [
    "CommDataStatus",
    "Cytp",
    "CommIsNot",
    "OrderStatus",
    "ConfirmStatus",
    "CarrierType",
    "OperationPattern",
    "TransportMenth",
    "Clearing",
    "CollectMethod",
    "TaxRate",
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 新运单管理表格数据
      shipmentList: [],
      // 弹出层标题
      title: "",
      // 是否收入成本确认时间范围
      daterangeCreateTime: [],
      // 是否收入成本确认时间范围
      daterangeFactArriveTime: [],
      // 是否收入成本确认时间范围
      daterangeFactLeaverTime: [],
      // 是否收入成本确认时间范围
      daterangeTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        status: null,
        backNumber: null,
        carriageIsExceed: null,
        carrierType: null,
        factArriveTime: null,
        factLeaverTime: null,
        feeType: null,
        isAbnormal: null,
        license: null,
        number: null,
        operationPattern: null,
        orderCode: null,
        outDriver: null,
        planLeaveTime: null,
        refuse: null,
        relateBill1: null,
        requireArriveTime: null,
        shipmentMethod: null,
        tan: null,
        time: null,
        value: null,
        volume: null,
        weight: null,
        jcCarrierId: null,
        jcDriverId: null,
        jcOrganizationId: null,
        jcOrganizationIdDtLabel: null,
        jcVehicleId: null,
        jcVehicleHeadId: null,
        actionTime: null,
        jcFromOrganizationId: null,
        jcFromOrganizationIdDtLabel: null,
        jcNowOrganizationId: null,
        jcNowOrganizationIdDtLabel: null,
        jcNextOrganizationId: null,
        jcNextOrganizationIdDtLabel: null,
        jcToOrganizationId: null,
        jcToOrganizationIdDtLabel: null,
        orgIds: null,
        outPhone: null,
        orgnameList: null,
        jzWeight: null,
        isConfirm: null,
      },
      ledList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询新运单管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeCreateTime && "" != this.daterangeCreateTime) {
        this.queryParams.params["beginCreateTime"] =
          this.daterangeCreateTime[0];
        this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
      }
      if (
        null != this.daterangeFactArriveTime &&
        "" != this.daterangeFactArriveTime
      ) {
        this.queryParams.params["beginFactArriveTime"] =
          this.daterangeFactArriveTime[0];
        this.queryParams.params["endFactArriveTime"] =
          this.daterangeFactArriveTime[1];
      }
      if (
        null != this.daterangeFactLeaverTime &&
        "" != this.daterangeFactLeaverTime
      ) {
        this.queryParams.params["beginFactLeaverTime"] =
          this.daterangeFactLeaverTime[0];
        this.queryParams.params["endFactLeaverTime"] =
          this.daterangeFactLeaverTime[1];
      }
      if (null != this.daterangeTime && "" != this.daterangeTime) {
        this.queryParams.params["beginTime"] = this.daterangeTime[0];
        this.queryParams.params["endTime"] = this.daterangeTime[1];
      }
      getDZShipmentList(this.queryParams).then((response) => {
        this.shipmentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.daterangeFactArriveTime = [];
      this.daterangeFactLeaverTime = [];
      this.daterangeTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    getDzLedList(row) {
      this.ledList = [];
      getDZLedList(row.id).then((response) => {
        this.ledList = response.data;
      });
    },
  },
};
</script>
